<template>
	<view>
		<view class="container">
			<view class="amountBox">
				<view class="amountValue">{{balance}}</view>
				<view>可提现金额(元)</view>
			</view>
			<view class="showWithdrawnList" @tap="toRecordsList()">查看提现记录</view>
		</view>

		<!-- 提现框 -->
		<view class="operationBox">
			<view class="operationValue">
				<view class="priceTip">￥</view>
				<view>
					<input type="number" v-model="withdrawal" placeholder="请输入要提现的金额" />
				</view>
				<view class="operationTitle" @tap="allIn()">全部提现</view>
			</view>
			<!-- <view class="inputItems">
				<view class="priceTip">开户银行:</view>
				<view class="inputItems_value">
					<input v-model="bankName" placeholder="请输入要提现的银行名称" />
				</view>
			</view>
			<view class="inputItems">
				<view class="priceTip">银行账号:</view>
				<view class="inputItems_value">
					<input type="number" v-model="bankNum" placeholder="请输入要提现的银行账号" />
				</view>
			</view> -->
			
			<view class="inputItems">
				<view class="priceTip">收款人:</view>
				<view class="inputItems_value">
					<input v-model="payee" placeholder="请输入收款人姓名" />
				</view>
			</view>
			
			<view class="inputItems">
				<view class="priceTip">联系电话:</view>
				<view class="inputItems_value">
					<input type="number" v-model="phone" placeholder="请输入联系电话" />
				</view>
			</view>
			
			<view class="contentWrapperBottomTips" style="color: #DA250D;">
				<view><text class="iconfont icon-jinggao"></text></view>
				<view style="font-size: 22rpx;">温馨提示,申请提现后要等待审核通过后钱才到账户哦</view>
			</view>
			
			<view class="operationButtonWrapper">
				<view class="operationButton" @tap="handleWithdrawalOfMoney()">提现</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				withdrawal: "", //要取的金额
				balance: "", //总余额  
				userInfo: {},
				bankName:"",
				bankNum:"",
				payee:"",
				phone:"",
				type:null,
				playerInfo:{}
			}
		},
		onLoad(opt) {
			this.type=opt.type
			if(opt.type==1){
				console.log("这是陪玩")
				this.getPlayWith()
			}else if(opt.type==2){
				console.log("这是经纪人")
				this.getUserInfo()
			}
		},
		methods: {
			async getPlayWith() {
				const { data } = await this.$http('/appapi/play_with/info',{
					"token":uni.getStorageSync("token")
				})
				this.playerInfo=data
				this.balance = data.amount
				console.log(this.playerInfo)
			}, 
			toRecordsList(){
				uni.navigateTo({
					url:"/pages/withdrawalRecords/withdrawalRecords?type="+this.type
				})
			},
			allIn() {
				this.withdrawal = this.balance
			},
			handleWithdrawalOfMoney() {
				//非空校验
				let err = ""
				if (!this.checkAmt(parseFloat(this.withdrawal))) {
					err = "请输入正确的金额"
				}
				let phoneReg = /0?(13|14|15|17|18|19)[0-9]{9}/
				if (!phoneReg.test(this.phone)) {
					err = "电话号码格式错误"
				}
				// let bankCard =	 /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/
				// if (!bankCard.test(this.bankNum)) {
				// 	err = "银行卡号格式错误"
				// }
				
				if (!this.withdrawal) {
					err = "请输入提现金额"
				}
				// if(!this.bankName){
				// 	err = "请输入开户银行"
				// }
				// if(!this.bankNum){
				// 	err = "请输入银行卡号"
				// }
				if(!this.payee){
					err = "请输入收款人姓名"
				}
				if(!this.phone){
					err = "请输入联系电话"
				}
				
				if (err) {
					uni.showToast({
						title: err,
						icon: "none"
					})
					return
				}
				
				console.log("发起请求")
				if(this.type==1){
					// this.getPlayWith()
					console.log("陪玩提现")
					this.playerWithdrawal()
				}else if(this.type==2){
					console.log("经纪人提现")
					this.brokerWithdrawal()
				}
			},
			brokerWithdrawal(){
				new Promise((resolve, reject) => {
					const data =  this.$http('/appapi/play_with/brokerWithdrawal',{
						money:this.withdrawal,
						account :this.bankNum,
						bank:this.bankName,
						name:this.payee,
						mobile:this.phone,
						sms:"test"
					});
					console.log(data)
				  resolve(data); //异步处理 
				}).then(res => {
					this.getUserInfo()
					return res.msg
				}).then(res2 => {
					uni.showToast({
						title:res2,
						icon:'none',
						duration:2000
					})
				})
			},
			playerWithdrawal(){
				new Promise((resolve, reject) => {
					const data =  this.$http('/appapi/play_with/withdrawal',{
						money:this.withdrawal,
						account :this.bankNum,
						bank:this.bankName,
						name:this.payee,
						mobile:this.phone,
						sms:"test"
					});
					console.log(data)
				  resolve(data); //异步处理 
				}).then(res => {
					this.getPlayWith()
					return res.msg
				}).then(res2 => {
					uni.showToast({
						title:res2,
						icon:'none',
						duration:2000
					})
				})
			},
			// 金额校验
			checkAmt(value) {
				if (value <= this.balance && value != 0) {
					return true;
				} else {
					return false
				}
			},
			async getUserInfo() {
				const data = await this.$http('/appapi/member/info');
				this.userInfo = data
				this.identity = data.identity
				this.balance = data.amount
			}
		}
	}
</script>

<style lang="less" scoped>
	.inputItems_value{
		flex: 2;
		input{
			width: 100%;
		}
	}
	.inputItems {
		align-items: center;
		display: flex;
		// justify-content: space-between;
		margin: 30rpx 0;
		gap: 20rpx;
	}

	.container {
		background-color: #F8F8F8;
		min-height: 100vh;
		padding: 25rpx;
	}

	.amountBox {
		background-color: #060400;
		border-radius: 20rpx;
		text-align: center;
		color: #fff;
		padding-top: 50rpx;
		border-left: 5rpx solid #4EFFCF;
		border-right: 5rpx solid #FF4E4E;
		padding-bottom: 160rpx;
	}

	.amountValue {
		font-size: 60rpx;
		padding-bottom: 20rpx;
	}

	.showWithdrawnList {
		width: 80%;
		text-align: center;
		background-color: #040404;
		border-left: 1rpx solid #4EFFCF;
		border-right: 5rpx solid #FF4E4E;
		color: #ffffff;
		margin: 650rpx auto;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.operationBox {
		width: 80%;
		margin: auto;
		position: absolute;
		top: -18%;
		border-radius: 20rpx;
		left: 0;
		bottom: 0;
		right: 0;
		background: #fff;
		height: 600rpx;
		padding: 25rpx;
		box-shadow: 0 0 3rpx black;
	}

	.operationTitle {
		color: #00d5f7;
		white-space: nowrap;
	}

	.operationValue {
		display: flex;
		justify-content: space-between;
	}

	.contentWrapperBottomTips {
		display: flex;
		color: #707070;
		font-size: 25rpx;
		margin-top: 20rpx;
	}

	.operationValue {
		padding-bottom: 20rpx;
		margin-top: 40rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.operationButtonWrapper {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
	}

	.operationButton {
		background-color: #000000;
		color: #fff;
		width: 70%;
		text-align: center;
		border-radius: 10rpx;
		padding: 25rpx;
		box-shadow: 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px rgb(80 250 204 / 50%);
	}

	.priceTip {
		font-size: 35rpx;
		line-height: 1;
		font-weight: 700;
	}
</style>